import { Button, Form, Input } from 'antd';
export function SearchForm(props) {
    const {query} = props;
    const [form] = Form.useForm();
    const formItemLayout = {

            labelCol: {
              span: 8,
            },
            wrapperCol: {
              span: 16,
            }
    }
    const buttonItemLayout= {
        wrapperCol: {
            offset:1,
            span: 24,
        }
    }
    const search = ()=>{
        // console.log(form.getFieldValue())
        query(form.getFieldValue())
    }
    const reset = ()=>{
        form.resetFields()
        // console.log(form.getFieldValue())
        query({})
    }
    return (
        <div>
            <Form
                {...formItemLayout}
                layout="inline"
                form={form}
            >
                <Form.Item label="姓名" name="name">
                    <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="所在部门" name="dept">
                    <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item {...buttonItemLayout}>
                    <Button type="primary" onClick={search}>查询</Button>
                    <Button onClick={reset}>重置</Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default SearchForm